<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt / inputEx</title>
  
<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../../../lib/yui/reset-fonts/reset-fonts.css" /> 

<!--link rel="stylesheet" type="text/css" href="../../../lib/yui/container/assets/container.css"-->
<script type="text/javascript" src="../../../lib/yui/utilities/utilities.js"></script>
<!--script type="text/javascript" src="../../../lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="../../../lib/yui/json/json-min.js"></script!-->

<!-- InputEx -->
<script src="../lib/inputex/js/inputex.js"  type='text/javascript'></script>
<script src="../lib/inputex/js/Field.js"  type='text/javascript'></script>
<script type="text/javascript" src="../js/WirableField.js"></script>
<script src="../lib/inputex/js/Group.js"  type='text/javascript'></script>
<script src="../lib/inputex/js/mixins/choice.js"  type='text/javascript'></script>
<script src="../lib/inputex/js/fields/StringField.js"  type='text/javascript'></script>
<script src="../lib/inputex/js/fields/SelectField.js"  type='text/javascript'></script>
<script src="../lib/inputex/js/fields/EmailField.js"  type='text/javascript'></script>
<script src="../lib/inputex/js/fields/UrlField.js"  type='text/javascript'></script>
<script src="../lib/inputex/js/fields/ListField.js"  type='text/javascript'></script>
<script src="../lib/inputex/js/fields/CheckBox.js"  type='text/javascript'></script>

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../lib/inputex/css/inputEx.css' />

<!-- Excanvas -->
<!--[if IE]><script type="text/javascript" src="../../../lib/excanvas.js"></script><![endif]-->

<!-- WireIt -->
<script type="text/javascript" src="../../../js/WireIt.js"></script>
<script type="text/javascript" src="../../../js/CanvasElement.js"></script>
<script type="text/javascript" src="../../../js/Wire.js"></script>
<script type="text/javascript" src="../../../js/BezierWire.js"></script>
<script type="text/javascript" src="../../../js/Terminal.js"></script>
<script type="text/javascript" src="../../../js/TerminalProxy.js"></script>
<script type="text/javascript" src="../../../js/Scissors.js"></script>
<script type="text/javascript" src="../../../js/DD.js"></script>
<script type="text/javascript" src="../../../js/DDResize.js"></script>
<script type="text/javascript" src="../../../js/Container.js"></script>
<script type="text/javascript" src="../../../js/Layer.js"></script>

<!-- WireIt inputex-->
<script type="text/javascript" src="../js/FormContainer.js"></script>

<link rel="stylesheet" type="text/css" href="../../../assets/WireIt.css" />


<style>
body {
	font-size: 10px;
}
div.WireIt-Container {
	width: 350px; /* Prevent the modules from scratching on the right */
}
div.WireIt-InputExTerminal {
	float: left;
	width: 21px;
	height: 21px;
	position: relative;
}
div.WireIt-InputExTerminal div.WireIt-Terminal {
	top: -3px;
	left: -7px;
}
div.inputEx-Group div.inputEx-label {
	width:100px;
}
</style>

 </head>
 <body>
	
	<script>

	YAHOO.util.Event.addListener(window, 'load', function() {
		// Required for the tooltips
		YAHOO.inputEx.spacerUrl = "../lib/inputex/images/space.gif";

		// Example 1
	   demoLayer = new WireIt.Layer({layerMap: false});
			
		 demoLayer.setWiring({
			containers: [
		 		{
					position:[380,240],
					xtype: "WireIt.FormContainer",
					collapsible: true,
					fields: [ 
						{type: 'select', label: 'Title', name: 'title', selectValues: ['Mr','Mrs','Mme'] },
						{label: 'Firstname', name: 'firstname', required: true }, 
						{label: 'Lastname', name: 'lastname', value:'Dupont'}, 
						{type:'email', label: 'Email', name: 'email', required: true, wirable: true }, 
						{type:'boolean', label: 'Happy to be there ?', name: 'happy'}, 
						{type:'url', label: 'Website', name:'website', size: 25} 
					],
					legend: 'Tell us about yourself...'
		 		},
				{
					position:[145,80],
					xtype: "WireIt.FormContainer",
					collapsible: true,
					fields: [
					    {label: 'Firstname', name: 'firstname' },
					    {label: 'Lastname', name: 'lastname' },
				      {label: 'Title', name: 'title' }
				   ],
					legend: 'Hello there',
					terminals: [
							{direction: [0,1], offsetPosition: { bottom: -14, left: 160},  ddConfig: { type: "output", allowedTypes: ["input"] }, name: "_OUT1" }
					]
		 		}
			],


				wires: [
					{
						src: {
							moduleId: 0,
							terminal: "email"
						},
						tgt: {
							moduleId: 1,
							terminal: "_OUT1"
						},

						xtype: "WireIt.BezierWire"
					}
				]
		});

	});
	</script>
 </body>
</html>